<!--
 * @Author: 曹捷
 * @Date: 2020-12-21 15:33:43
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-03-07 20:46:36
 * @Description: 适配国际化   并且 打造成适合习惯的单选上拉组件
-->
<template>
  <span class="uselect">
    <span class="one-line" :class="{'color-tip':!defaultName}" @click="showInfo">{{defaultName||placeholder}}</span>
    <u-select v-model="show" :value-name="valueName" :label-name="labelName" :mode="mode" :default-value="defaultValue"
      :cancel-text="cancelText " :confirm-text="confirmText" :list="list" @confirm="confirm"></u-select>
  </span>
</template>

<script>
export default {
  props: {
    value: {
      type: [Number, String, Array],
    },
    list: {
      type: Array,
    },
    placeholder: {
      type: String,
      default: 'placeholder',
    },
    valueName: {
      type: String,
      default: 'valueName',
    },
    labelName: {
      type: String,
      default: 'name',
    },
    cancelText: {
      type: String,
      default: '取消',
    },
    confirmText: {
      type: String,
      default: '确认',
    },
    mode: {
      type: String,
      default: 'single-column',
    },
    itemClick: {
      type: Boolean,
      default: true,
    },
    name: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      defaultValue: [],
      show: false,
      defaultName: '',
      confirmData: [],
    }
  },
  watch: {
    value(value, oldValue) {
      if (this.mode === 'mutil-column-auto' && value.length === 0) {
        this.confirmData = []
        this.defaultName = ''
      }
    },
  },
  methods: {
    showInfo() {
      if (this.itemClick) {
        this.toShow()
      }
    },
    toShow() {
      this.show = true
    },
    confirm(e) {
      this.confirmData = e
      console.log('🚀 ~ file: obit-uselect.vue ~ line 60 ~ confirm ~ e', e)
      this.$nextTick(() => {
        this.initValue()
      })
    },
    initValue() {
      let values = [],
        keys = []
      let name = ''
      let list = this.list
      this.confirmData &&
        this.confirmData.forEach((element) => {
          let index = list.findIndex((item) => {
            return item[this.valueName] == element.value
          })
          if (index !== -1) {
            values.push(index)
            keys.push(list[index][this.valueName])
            name += list[index][this.labelName] + ' '
            list = list[index].children
          }
        })
      this.defaultValue = values
      if (keys.length === 1) {
        this.$emit('input', keys[0])
      } else {
        this.$emit('input', keys)
        this.$emit('update:name', name)
      }

      this.defaultName = name
    },
  },
  mounted() {
    if (this.mode === 'single-column' && this.value) {
      this.confirmData = [{ value: this.value }]
      this.initValue()
    } else if (
      this.mode === 'mutil-column-auto' &&
      this.value instanceof Array
    ) {
      this.value.forEach((element) => {
        this.confirmData.push({ value: element })
      })
      this.defaultName = this.name
    }
  },
}
</script>

<style>
</style>